<template><div>
                <div class="content__inner">
                    <header class="content__title">
                        <h1>Popover</h1>
                        <small>Add small overlay content, like those found in iOS, to any element for housing secondary information.</small>

                        <div class="actions">
                            <a href="" class="actions__item zmdi zmdi-trending-up"></a>
                            <a href="" class="actions__item zmdi zmdi-check-all"></a>

                            <div class="dropdown actions__item">
                                <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Refresh</a>
                                    <a href="" class="dropdown-item">Manage Widgets</a>
                                    <a href="" class="dropdown-item">Settings</a>
                                </div>
                            </div>
                        </div>
                    </header>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Basic example</h2>
                            <small>Click on the button below to toggle the Popover</small>
                        </div>

                        <div class="card-block">
                            <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="And here&#39;s some amazing content. It&#39;s very engaging. Right?">Click to toggle popover</button>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">All four directions</h2>
                            <small class="card-subtitle">Four positioning options are available: top, right, bottom, and left aligned.</small>
                        </div>

                        <div class="card-block">
                            <div class="btn-demo">
                                <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                    Popover on top
                                </button>

                                <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                    Popover on right
                                </button>

                                <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
                                    Popover on bottom
                                </button>

                                <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                    Popover on left
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Hoverable</h2>
                            <small class="card-subtitle">Use <code>focus: hover</code> to make Popovers hoverable.</small>
                        </div>

                        <div class="card-block">
                            <button class="btn btn-primary" data-toggle="popover" data-trigger="hover" title="Dismissible popover" data-content="And here&#39;s some amazing content. It&#39;s very engaging. Right?">Dismissible popover</button>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Dismiss on next click</h2>
                            <small class="card-subtitle">Use the <code>focus</code> trigger to dismiss popovers on the next click that the user makes.</small>
                        </div>

                        <div class="card-block">
                            <button tabindex="0" class="btn btn-primary" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here&#39;s some amazing content. It&#39;s very engaging. Right?">Dismissible popover</button>
                        </div>
                    </div>
                </div>

                
            </div></template>